

<!-- 幸运转盘 -->
<template>
	<view>
		
		<!-- banner -->
		<view class="bannerList-Container">
			<swiper interval="true" circular="false" class="banner"
				:current="bannerCurrent" @change="bannerSwiperChange">
				<swiper-item v-for="(item, index) in bannerPicture" :key="index" class="swiper-item">
					<image :src="imgSite + item.bannerAddress" class="slide-image" mode="aspectFill" @click="looKDetail(item)"></image>
				</swiper-item>
			</swiper>
			
			<cover-view class="showNO-Container">
				{{bannerCurrent+1}}/{{bannerPicture.length}}
			</cover-view>
		</view>
		
		
		<!-- 抽奖信息 -->
		<view class="conbox">
			<image class="luckBg" :src="icon.luckBg" mode="widthFix"></image>
			
			<image :src="icon.rulesBtn" @click.stop="toRichtext()" class="detailRules"></image>
			
			<view class="container">
				
				<!-- 抽奖转盘 -->
				<view class="main">
					<view class="canvas-container">
						<image class="canvasBg" :src="icon.canvasBg"></image>
						
						<!-- <canvas class="canvas" canvas-id="canvas" :style="'width:'+canvasWidth+'px; height:'+canvasHeight+'px; transform: rotate3d(0,0,1,'+(currentAngel)+'deg);'"></canvas> -->
						<!-- <canvas :animation="animationData" class="canvas" canvas-id="canvas" :style="'width:'+canvasWidth+'px; height:'+canvasHeight+'px;'"></canvas> -->
						<image class="btn" src="/pagesAccount/static/images/sign/startLuck.png" id="start" @tap="playReward"></image>
					</view>
					
					
					<!-- 绘制背景 -->
					<view :animation="animationData" class='canvas-list pie-Container'>
						<view class="slice" :class="{oddNO: index % 2 == 0, evenNO: index % 2 != 0}" :style="{transform: 'rotate(-'+(360/awardsList.length * (index + 1) )+'deg) skewY(-'+(90-360/awardsList.length)+'deg)'}" v-for="(item, index) in awardsList" :key="index"></view>
					</view>
					
					
					<!-- 绘制图片 -->
					<!-- <view class="canvas-list" :style="'transform: rotate3d(0,0,1,'+(currentAngel)+'deg);'"> -->
					<view :animation="animationData" class="canvas-list">
						<view class="canvas-item" :style="{transform: 'rotate('+(index * onePrizeWidth + onePrizeWidth / 2)+'deg)', zIndex:index}" v-for="(item, index) in awardsList" :key="index">
							<view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
								<view :class="{oddNO: index % 2 == 0, evenNO: index % 2 != 0}">{{item.name}}</view>
								<image :src="item.image" style="width: 64rpx; height: 64rpx;" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 抽奖次数 -->
				<view class="luckTimes">
					今日还可以免费抽奖<text> {{luckTimes}} </text>次
				</view>
				<view class="costPoint">
					每次抽奖消耗<text> {{costPoint}} </text>积分
				</view>
				
				
				<!-- 奖品/分享 -->
				<view class="prizShare-Container">
					<view @click="getMyPrizeRecord()" class="btn-Container">
						<image class="btn-bg" :src="icon.btnBg"></image>
						<view class="btn-Text">
							我的中奖记录
						</view>
					</view>
					
					<!-- #ifdef APP-PLUS || H5 -->
					<view @click="userShareHandler()" class="btn-Container">
						<image class="btn-bg" :src="icon.btnBg"></image>
						<view class="btn-Text">
							分享获免费次数
						</view>
					</view>
					<!-- #endif -->
					
					
					<!-- #ifdef MP-WEIXIN -->
					<view class="btn-Container">
						<image class="btn-bg" :src="icon.btnBg"></image>
						<view class="btn-Text">
							分享获免费次数
						</view>
						<button type="default" open-type="share"></button>
					</view>
					<!-- #endif -->
				</view>
				
				
				<!-- 中奖名单 -->
				<view class="luckUserList-Container">
					<view class="lucktTitle-Container">
						<image class="luckIcon" :src="icon.luckIcon"></image>
						<view class="luckText">
							中奖名单
						</view>
						<image class="luckIcon" :src="icon.luckIcon"></image>
					</view>
					
					<view class="luckUserList">
						<view v-for="(item, index) in luckUserList" class="luckUser">
							<image class="userPhoto" :src="imgSite + item.headImg"></image>
							<view class="luckTips">
								{{item.customerName | customerNameFilter}} 在幸运转盘中获得[{{item.prizeName}}]
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 抽奖成功 -->
		<view v-if="showLuckResultFlag" class="luckSuccess-OutContainer">
			<view class="luckSuccess">
				<view v-if="luckInfo.winType == 40" class="successText">
					谢谢参与！
				</view>
				<view v-else class="successText">
					{{luckInfo.winText}}
				</view>
				<view @click="closeLuckResultView()" class="iKnowBtn">
					我知道了
				</view>
			</view>
		</view>
		
		
		<!-- 分享 -->
		<uni-popup ref="showpopup" :type="type" style="z-index: 100;">
			<view class="share">
				<view class="title-name flex-all-center">
					<image :src="icon.left"></image>
					分享到
					<image :src="icon.right"></image>
				</view>
				<view class="icons flex-rwo-around">
					
					<view class="icon-block flex-all-center">
						<image :src="icon.weixin" @click="share('0')"></image>
						<text>微信好友</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.pengyouquan" @click="share('1')"></image>
						<text>朋友圈</text>
					</view>
					<!--<view class="icon-block flex-all-center">
						<image :src="icon.weibo" @click="share('2')"></image>
						<text>微博</text>
					</view>-->
				</view>
				<view class="cancel" @click="cancel()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	var turntable = {
		wheelSurf(canvasId, options) {
			function Truntable(ctx, options) {
				var _default = {
					outerCircle: {
						color: '#df1e15'
					},
					innerCircle: {
						color: '#f4ad26'
					},
					dots: ["#FBF0B0", "#FFFFFF"],
					disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'],
					title: {
						color: '#5c1e08',
						font: '10px Arial'
					}
				}
				_default = Object.assign(_default, options);

				var width = _default.width;
				var height = _default.height;
				var imgs = [];
				var awardTitle = [];
				var awardPic = [];
				var first = true;
				for (var item in _default.list) {
					awardTitle.push(_default.list[item].name)
					imgs.push(_default.list[item].image)
				}
				var num = imgs.length;
				// 圆心
				var x = width / 2;
				var y = height / 2;

				Truntable.prototype.init = function(angelTo) {

					ctx.translate(x, y);
					angelTo = angelTo || 0;
					ctx.clearRect(0, 0, width, height);

					// 平分角度
					var angel = (2 * Math.PI / 360) * (360 / num);
					var startAngel = 2 * Math.PI / 360 * (-90);
					var endAngel = 2 * Math.PI / 360 * (-90) + angel;


					// 旋转画布
					ctx.save();
					ctx.rotate(angelTo * Math.PI / 180);
					
					// 画里转盘                
					var colors = _default.disk
					for (var i = 0; i < num; i++) {
						ctx.beginPath();
						ctx.lineWidth = x - 45;
						ctx.strokeStyle = colors[i % colors.length]
						ctx.arc(0, 0, x / 2 - 15, startAngel, endAngel)
						ctx.stroke();
						startAngel = endAngel
						endAngel += angel
					}
					startAngel = angel / 2;
					for (var i = 0; i < num; i++) {
						var text = awardTitle[i];
						var line_height = _default.title.lineHeight;
						ctx.save();
						ctx.rotate(startAngel);

						ctx.font = _default.title.font;
						ctx.fillStyle = _default.title.color;
						ctx.textAlign = "center";
						var ry = -(x / 2) - 25;
						if (text.indexOf("\n") > 0) { //换行
							var texts = text.split("\n");
							for (var j = 0; j < texts.length; j++) {
								ctx.fillText(texts[j], 0, ry + j * line_height);
							}
						} else if (text.indexOf("\n") == -1 && text.length > 6) { //奖品名称长度超过一定范围 
							text = text.substring(0, 6) + "||" + text.substring(6);
							var texts = text.split("||");
							for (var j = 0; j < texts.length; j++) {
								ctx.fillText(texts[j], 0, ry + j * line_height);
							}
						} else {
							ctx.fillText(text, 0, ry);
						}
						startAngel += angel;
						ctx.restore();
					}
					
					if (first) {
						first = false;
						setTimeout(function() {
							ctx.draw();
						}, 100)
					} else {
						ctx.draw();
					}
				};
			}
			var ctx = uni.createCanvasContext(canvasId, options.$this)
			var Truntable = new Truntable(ctx, options);
			Truntable.init();
			return Truntable;
		}
	};
	export default {
		filters: {
			customerNameFilter(customerName) {
				return customerName[0] + "***" + customerName[1]
			}
		},
		computed: {
			...mapState(['imgSite', 'hasLogin', 'url'])
		},
		data() {
			return {
				icon: {
					luckBg: "/pagesAccount/static/images/sign/luck-bg.png",
					btnBg: "/pagesAccount/static/images/sign/btn.png",
					luckIcon: "/pagesAccount/static/images/sign/luckIcon.png",
					rulesBtn: "/pagesAccount/static/images/sign/rules.png",
					canvasBg: "/pagesAccount/static/images/sign/canvasBg.png",
					
					left: "/static/images/detail/left.png",
					right: "/static/images/detail/right.png",
					weixin: "/static/images/detail/wechat.png",
					weibo: "/static/images/detail/weibo.png",
					pengyouquan: "/static/images/detail/pengyouquan.png",
					haibao: "/static/images/detail/haibao.png"
				},
				type: 'bottom',
				
				//抽奖转盘
				turntable: null,
				canvasWidth: 0,
				canvasHeight: 0,
				inLottery: false,
				
				//抽奖信息
				onePrizeWidth: 0,
				awardsList: {},
				luckTimes: 0,
				costPoint: 0,
				
				//活动相关
				luckwheelId: "", 
				luckUserList: [],
				
				//banner
				bannerCurrent: 0,
				bannerPicture: [],
				
				//抽奖结果
				luckInfo: {},
				prizeIndex: 0,
				currentAngel: 0,
				animationData: {},
				showLuckResultFlag: false
			}
		},
		onLoad: function() {
			
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.canvasWidth = 676/750 * res.windowWidth;
					that.canvasHeight = 676/750 * res.windowWidth;

					// 获取奖品列表
					that.initdata();
				}
			});
			
			
			//获取banner
			this.getBannerPicture_fun();
		},
		onShow() {
			
			if(this.hasLogin) {
				this.inLottery = false;
				this.getUserLuckTimes();
			}
		},
		onShareAppMessage() {
			
			var that = this;
			
			//分享调用接口
			that.luckShareRecord();
			
			return {
				title: '我正在构购电商平台抽奖, 快来查看',
				path: "/pagesAccount/signIn/luck",
				imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png'
			}
		},
		methods: {
			
			// 初始化抽奖数据
			initdata: function() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/luckWheelApi/getLuckBigWheel",
					method: "POST",
					success: function(res) {
						if(res.data.success) {
							
							that.luckTimes = res.data.response.freeCnt;
							that.costPoint = res.data.response.costPoint;
							that.luckwheelId = res.data.response.luckwheelId;
							
							//中奖名单列表
							if(that.luckwheelId) {
								that.getLuckUserList();
							}
							
							var diskColor = [];
							
							that.awardsList = [];
							for(var i = 0; i < res.data.response.prizeList.length; i++) {

								var item = res.data.response.prizeList[i];
								that.awardsList.push({
									"diskColor": (i % 2 == 0 ? "#FFEAA7" : "#FCF9F1"),
									"id": item.luckwheelPrizeId,
									"name": item.prizeName,
									"winType": item.prizeType,
									"winText": "恭喜您抽中了【"+item.prizeName+"】！",
									"image": that.imgSite + item.prizeImg
								});
							}
							that.onePrizeWidth = 360 / that.awardsList.length;
							
							for (var i = 0; i < that.awardsList.length; i++) {
								diskColor.push(that.awardsList[i].diskColor);
							}
											
							// 画转盘
							var width = that.canvasWidth;
							var height = width;
							that.turntable = turntable.wheelSurf("canvas", {
								$this: that,
								list: that.awardsList,
								width: width,
								height: height,
								outerCircle: {
									color: '#F95151' // 外圈颜色(可选)
								},
								innerCircle: {
									color: '#B33E0A' // 里圈颜色(可选)
								},
								dots: ["#FBF0B0", "#FFFFFF"], // 装饰点颜色(可选)
								disk: diskColor, //中心奖盘的颜色，默认7彩(可选)
								title: {
									color: '#B14A29',
									font: '13px Arial',
									lineHeight: 13
								}
							});
						}
					},
				});
			},
			
			//发起抽奖  
			playReward: function() {
				this.lottery(false);
			},
			lottery: function(integralExchange = false) {
				
				var that = this;
				
				//正在抽奖则返回
				if(that.inLottery) {
					return;
				}
				
				//无抽奖次数
				if(that.luckTimes == 0) {
					uni.showModal({
						content: "您今日的免费抽奖次数已用完，之后的每次抽奖将消耗"+that.costPoint+"积分!",
						confirmText: '确认',
						cancelText: '取消',
						success(res) {
							if (res.confirm) {
								startLuck(that);
							}
						}	
					});
				}else {
					startLuck(that);
				}
				
				function startLuck(that) {
					
					that.inLottery = true;
					var angel = 360 / that.awardsList.length;
					
					// 获取奖品
					that.$api.globalUtil.requestAjax({
						url: "/luckWheelApi/drawBigWheel",
						method: "POST",
						success: function(res) {
							if(res.data.success) {
								
								var prizeId = "";
								if(res.data.response.state != "00") {
									that.$api.msg(res.data.response.tip || "抽奖失败!");
									that.inLottery = false;
									return ;
								}else {
									prizeId = res.data.response.prizeId;
								}
								
								
								var luckInfo = null;
								var prizeIndex = 0;
								
								// 计算奖品角度
								for (var index = 0; index < that.awardsList.length; index++) {

									if (prizeId == that.awardsList[index].id) {
										luckInfo = that.awardsList[index];
										
										if(index - that.prizeIndex >= 0) {
											prizeIndex = index - that.prizeIndex;
										}else {
											prizeIndex = that.awardsList.length + index - that.prizeIndex;
										}
										
										that.prizeIndex = index;
										break;
									}
								}
								
								
								//创建动画
								var currentAngel = -(prizeIndex * angel + (that.currentAngel == 0 ? angel/2 : 0)) + that.currentAngel - 1800;
								that.currentAngel = currentAngel;
								
								var duration = 4000;
								var animationRun = uni.createAnimation({
									duration: duration,
									timingFunction: 'ease'
								})
								animationRun.rotate(currentAngel).step();
								that.animationData = animationRun.export();
								
								setTimeout(function() {
									that.inLottery = false;
									
									that.luckInfo = luckInfo;
									that.showLuckResultFlag = true;
									
									that.getUserLuckTimes();
								}, duration + 1000);
							}
						},
					});
				}
			},
			
			//抽奖规则
			toRichtext() {
				uni.navigateTo({
					url: '/pagesUser/userRichtext?type=' + 8
				});
			},
			
			
			//获取banner
			getBannerPicture_fun() {
				var that = this;
				that.$api.globalUtil.getAreaBanner("100", function(res) {
					that.bannerPicture = res.data.response;
				});
			},
			bannerSwiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			looKDetail(item) {
				this.$api.globalUtil.adJumpToOtherPage(item);
			},
			
			
			//关闭结果
			closeLuckResultView() {
				this.showLuckResultFlag = false;
			},
			
			
			//中奖名单
			getLuckUserList() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/luckWheelApi/getLuckBigWheelReceiveList",
					method: "POST",
					data: {
						luckwheelId: that.luckwheelId
					},
					success: function(res) {
						if(res.data.success) {
							that.luckUserList = res.data.response;
						}
					},
				});
			},
			
			
			//我的奖品列表
			getMyPrizeRecord() {
				
				var that = this;
				that.userHasLoginFilter(function() {
					that.$nextTick(() => {
						uni.navigateTo({
							url: "/pagesAccount/signIn/record?luckwheelId="+that.luckwheelId
						});
					});
				});
			},
			
			
			// 弹窗分享
			userHasLoginFilter(callBack) {
				if(!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesUser/login/userLogin'
					});
				}else {
					callBack();
				}
			},
			userShareHandler() {
				
				var that = this;
				that.userHasLoginFilter(function() {
					
					// #ifdef H5
					uni.setClipboardData({
						data: encodeURI(that.url + "#/pagesAccount/signIn/luck"),
						success: function(data) {
							uni.showToast({
								title: '您的分享链接已复制到您的粘贴板，',
								icon: 'none'
							});
							// that.luckShareRecord();
						},
						fail: function(err) {},
						complete: function(res) {}
					});
					// #endif
					
					// #ifndef H5
					that.$nextTick(() => {
						that.$refs['showpopup'].open();
					});
					// #endif
				});
			},
			// 关闭分享弹窗
			cancel() {
				this.$refs['showpopup'].close();
			},
			// 分享
			share(e) {
				
				let that = this;
				if (e == '0') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: that.url + "#/pagesAccount/signIn/luck",
						title: "构购",
						summary: "我正在构购电商平台抽奖, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							that.luckShareRecord();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
			
				} else if (e == '1') {
			
					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 0,
						href: that.url + "#/pagesAccount/signIn/luck",
						title: "构购",
						summary: "我正在构购电商平台抽奖, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							that.luckShareRecord();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (e == '2') {
			
					uni.share({
						provider: "sinaweibo",
						type: 0,
						href: that.url + "#/pagesAccount/signIn/luck",
						title: "构购",
						summary: "我正在构购电商平台抽奖, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							that.luckShareRecord();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},
			// 关闭弹窗
			closeModalHandler() {
				this.showCouponModal = false;
				this.showSpecModal = false;
			},
			
			
			//抽奖分享
			luckShareRecord() {
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/luckWheelApi/shareBigWheel",
					method: "POST",
					success: function(res) {
						if(res.data.success) {
							if(res.data.response.state == "00") {
								that.getUserLuckTimes();
								that.$api.msg("分享成功!");
							}else {
								that.$api.msg(res.data.response.tip || "分享失败!");
							}
						}
					},
				});
			},
			
			
			
			//抽奖次数信息
			getUserLuckTimes() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/luckWheelApi/getLuckBigWheel",
					method: "POST",
					success: function(res) {
						if(res.data.success) {
							
							that.luckTimes = res.data.response.freeCnt;
							that.costPoint = res.data.response.costPoint;
						}
					},
				});
			}
		}
	}
</script>
<style lang="less" scoped>
	.btn {}

	.uni-btn-icon {
		color: #fff;
		font-size: 27px;
		position: absolute;
		top: 2.5vw;
		left: 2vw;
	}

	.title {
		position: relative;
		width: 100%;
		text-align: center;
		padding-top: 3vw;
		font-size: 18px;
		color: #fff;
	}

	.conbox {
		width: 750upx;
		height: 1800rpx;
		background-color: #fd9158;
		overflow-x: hidden;
		// overflow-y: scroll;
		overflow-y: hidden;
	}

	.container,
	image.cont {
		width: 750upx;
		height: auto;
		position: relative;
	}

	image.cont {
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 20px;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}

	.header {
		/* height: 246upx; */
		padding-top: 75upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
	}




	.header .rule {
		padding: 15upx 10upx 15upx 60upx;
		color: #FFFFFF;
		background-color: #FFC000;
		border-radius: 40upx;
		margin-left: -45upx;
		width: 160upx
	}

	.header .info {
		padding: 100upx 30upx 0upx 30upx;
		width: 100%;
		color: #FEE40B;
	}


	.header .times {
		float: left;
		font-size: 35upx;
		font-weight: bold;
	}

	.header .times text {
		color: #FFFFFF;
	}


	.header .my-prize {
		float: right;
		font-size: 35upx;
		font-weight: bold;
	}

	.header .my-prize text {
		color: #FFFFFF;
	}

	/* 转盘 */
	.canvas-container {
		position: relative;
		width: 100%;
		height: 644rpx;
	}

	.canvas {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -345rpx;
		margin-left: -338rpx;
	}
	.canvasBg {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -315rpx;
		width: 630rpx;
		height: 644rpx;
	}

	#start {
		z-index: 9;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 167rpx;
		height: 184rpx;
		margin-left: -86rpx;
		margin-top: -102rpx;
		cursor: pointer;
	}

	.rule-dialog {
		background-color: transparent !important;
	}

	.rule-container {
		min-height: 300upx;
		display: flex;
		flex-direction: column;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		padding: 30upx;
		/* box-sizing: border-box; */
		color: #fff;
	}

	.rule-container .title {
		text-align: center;
		margin-bottom: 36upx;
		font-size: 40upx;
	}

	.rule-container .g_item {
		font-size: 30upx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
		margin-bottom: 10px;
	}


	.shadowbox {
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.my-prize-dialog {
		width: 600upx;
		min-height: 180upx;
		background: #FFEEDF;
		border: 10upx solid #F2692F;
		color: #333;
		font-size: 24upx;
		font-family: PingFang-SC-Medium;
		border-radius: 40upx;
		padding-bottom: 20upx;
	}

	.my-prize-dialog .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding: 36upx 0;
		justify-content: center;
	}

	.my-prize-dialog .itembox {
		max-height: 1320upx;
		overflow-y: auto;
	}

	.my-prize-dialog .item {
		width: 100%;
		height: 66upx;
		padding: 0 32upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.my-prize-dialog .no-prize {
		padding: 40upx 0;
	}

	.mission-title {
		width: 90%;
		margin: 10px 5%;
	}

	.mission-list {
		position: relative;
		z-index: 3;
		text-align: center;
		color: #ffffff;
		width: 90%;
		margin: 0 5% 50upx 5%;
	}

	.mission-list .title {
		margin-top: 50upx;
		background-color: #FD9383;
		border: 1upx solid #FFFFFF;
	}

	.mission-list .title view {
		border-right: 1upx solid #FFFFFF;
		padding: 15upx 10upx;
	}

	.mission-list .title view:nth-child(3) {
		border-right: 0upx solid #FFFFFF;
	}


	.mission-list .mission {
		border: 1upx solid #FFFFFF;
		border-top: 0upx solid #FFFFFF;
		line-height: 60upx;
		height: 100upx;
	}

	.mission-list .mission view {
		border-right: 1upx solid #FFFFFF;
		padding: 20upx 10upx;
	}

	.mission-list .mission view:nth-child(3) {
		border-right: 0upx solid #FFFFFF;
	}

	.mission-list .mission .mission-button {
		width: 100upx;
		height: 50upx;
		line-height: 50upx;
		padding: 5upx 10upx;
		display: inline-block;
		background-color: #FDF3AB;
		color: #FD302D;
		font-size: 30upx;
		border-radius: 8upx;
	}


	.mission-list .mission .mission-button.disabled {
		background-color: #BEBEBE;
		color: #FFFFFF;
	}
	
	
	/* banner */
	.bannerList-Container {
		position: relative;
		width: 100%;
		height: 300rpx;
		
		.banner {
			overflow: hidden;
			height: 100%;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		/* 显示序号 */
		.showNO-Container {
			position: absolute;
			right: 30rpx;
			bottom: 16rpx;
			padding: 0 20rpx;
			height: 36rpx;
			line-height: 36rpx;
			font-size: 22rpx;
			color: rgba(255, 255, 255, 1);
			background: rgba(0, 0, 0, 1);
			border: 1px solid rgba(255, 255, 255, 1);
			opacity: 0.3;
			border-radius: 23px;
		}
	}
	
	
	//抽奖背景
	.conbox {
		position: relative;
		
		.luckBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		
		.detailRules {
			z-index: 99;
			position: absolute;
			top: 40rpx;
			right: 0;
			width:160rpx;
			height:62rpx;
		}
		
		.container {
			margin-top: 90rpx;
		}
	}
	
	
	//抽奖次数
	.luckTimes {
		margin-top: 40rpx;
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #874F22;
		
		text {
			padding: 0 8rpx;
			color: #FF0D02;
		}
	}
	.costPoint {
		margin-top: 14rpx;
		width: 100%;
		text-align: center;
		font-size: 20rpx;
		color: #874F22;
		
		text {
			padding: 0 6rpx;
			color: #FF0D02;
		}
	}
	
	
	// 奖品/分享
	.prizShare-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-top: 56rpx;
		padding: 0 30rpx;
		width: 100%;
		height: 95rpx;
		line-height: 95rpx;
		
		.btn-Container {
			position: relative;
			width: 330rpx;
			height: 95rpx;
			
			.btn-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			
			.btn-Text {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #EB3C08;
			}
			
			button {
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 95rpx;
			}
		}
	}
	
	
	//中奖名单
	.luckUserList-Container {
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 40rpx 50rpx 50rpx 50rpx;
		width:690rpx;
		height: 680rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		
		.lucktTitle-Container {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			width: 100%;	
			height: 40rpx;
			
			.luckIcon {
				width: 40rpx;
				height: 30rpx;
			}
			.luckText {
				margin: 0 28rpx;
				font-size: 34rpx;
				color: #333333;
			}
		}
		
		.luckUserList {
			max-height: 550rpx;
			overflow-y: scroll;
			
			.luckUser {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.userPhoto {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				
				.luckTips {
					margin-left: 20rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}
	
	
	//抽奖成功
	.luckSuccess-OutContainer {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background:rgba(0,0,0,0.7);
		
		.luckSuccess {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			padding: 100rpx 0 50rpx 0;
			width:600rpx;
			height:330rpx;
			font-size: 32rpx;
			color: #333333;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			
			.iKnowBtn {
				width:418rpx;
				height:70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size:28rpx;
				color: #FFFFFF;
				background:#FE5E49;
				border-radius:35rpx;
			}
		}
	}
	
	
	// 分享
	.share {
		width: 100%;
		height: 486rpx;
		border-radius: 16rpx 16rpx 0 0;
		background-color: white;
		z-index: 1000;
		position: relative;
	
		.title-name {
			height: 126rpx;
			width: 100%;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}
	
		image {
			width: 168rpx;
			height: 16rpx;
			margin: 0 35rpx 0 35rpx;
		}
	
		.icons {
			width: 690rpx;
			margin: 24rpx auto 0 auto;
			border-bottom: 1rpx solid#eee;
			padding-bottom: 74rpx;
	
			.icon-block {
				width: 120rpx;
				font-size: 26rpx;
				color: #333333;
				flex-wrap: wrap;
	
				image {
					flex-shrink: 0;
					width: 110rpx;
					height: 110rpx;
				}
	
				text {
					margin-top: 24rpx;
				}
			}
		}
	
		.cancel {
			color: #999999;
			font-size: 30rpx;
			margin-top: 27rpx;
			width: 100%;
			text-align: center;
		}
	}
	
	
	
	
	
	// 将项图片
	.canvas-list {
		z-index: 1;
		position: absolute;
		top: 52rpx;
		left: 50%;
		margin-left: -265rpx;
		width: 530rpx;
		height: 530rpx;
	}
	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
	}
	.canvas-item-text {
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 30rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		view {
			margin-bottom: 20rpx;
			font-size: 22rpx;
			
			&.oddNO {
				color: #FB6056;
			}
			&.evenNO {
				color: #A8872A;
			}
		}
	}
	
	
	//奖项背景
	.pie-Container {
		 width: 530rpx;
		 height: 530rpx;
		 border-radius: 100%;
		 overflow: hidden;
		 
		.slice {
			overflow: hidden;
			position: absolute;
			top: 0;
			right: 0;
			width: 50%;
			height: 50%;
			transform-origin: 0% 100%;
			
			&.oddNO {
				background-color: #FCF9F0;
			}
			&.evenNO {
				background-color: #FFEAA7;
			}
		}
	}
</style>



